<template>
  <layout title="keyboard键盘">
    <layout-content title="基础使用">
      <options-list icon="keyboard" @click="numberKeyboard = true">数字键盘</options-list>
      <options-list icon="keyboard" icon-color="tn-color-red" @click="cardKeyboard = true">身份证键盘</options-list>
      <options-list icon="keyboard" icon-color="tn-color-green" @click="carKeyboard = true">车牌键盘</options-list>
    </layout-content>

    <layout-content title="不带小数点">
      <options-list icon="keyboard" @click="noDotNumberKeyboard = true">不带小数点数字键盘</options-list>
    </layout-content>

    <layout-content title="乱序键盘">
      <options-list icon="keyboard" @click="randomNumberKeyboard = true">乱序数字键盘</options-list>
    </layout-content>
  </layout>

  <tn-keyboard v-model="keyboardValue" v-model:show="numberKeyboard"></tn-keyboard>
  <tn-keyboard v-model="keyboardValue" v-model:show="noDotNumberKeyboard" :dot="false"></tn-keyboard>
  <tn-keyboard v-model="keyboardValue" v-model:show="randomNumberKeyboard" random></tn-keyboard>
  <tn-keyboard v-model="keyboardValue" v-model:show="cardKeyboard" mode="card"></tn-keyboard>
  <tn-keyboard v-model="keyboardValue" v-model:show="carKeyboard" mode="car"></tn-keyboard>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnKeyboard from '@/tuniao-ui/components/tn-keyboard/src/Keyboard.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

let numberKeyboard = ref<boolean>(false)
let cardKeyboard = ref<boolean>(false)
let carKeyboard = ref<boolean>(false)
let noDotNumberKeyboard = ref<boolean>(false)
let randomNumberKeyboard = ref<boolean>(false)


let keyboardValue = ref<string>('')
watch(() => {
  return [numberKeyboard.value, cardKeyboard.value, cardKeyboard]
}, () => {
  keyboardValue.value = ''
})
</script>

<style lang="scss" scoped>
</style>
